<template>
	<div class="j-carousels">
		<div class="">
			<swiper :options="swiperOption" class="group-branch-swiper">
				<!--<swiper-slide v-for="(slide, index) in swiperSlides" :key="index" class="swiper-slide-list">-->
				<swiper-slide class="swiper-slide-list">
					<img src="../../assets/carousel/carousel_1.jpg" alt="">
				</swiper-slide>
				<swiper-slide class="swiper-slide-list">
					<img src="../../assets/carousel/carousel_2.jpg" alt="">
				</swiper-slide>
				<swiper-slide class="swiper-slide-list">
					<img src="../../assets/carousel/carousel_3.jpg" alt="">
				</swiper-slide>
				<div class="swiper-button-prev" slot="button-prev"></div>
				<div class="swiper-button-next" slot="button-next"></div>
			</swiper>
		</div>
	</div>
</template>
<script>
import api from '../../service/api'
export default {
  name: 'carrousel',
  data () {
    return {
      swiperOption: {
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        // autoplay: true,
        loop: true
      }
    }
  },
  methods: {
    findAllPic () {
      api.findAllPic()
        .then(res => {
          if (res.code === 200) {
            console.log(res.result)
          } else {
            console.log(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  },
  created () {
    this.findAllPic()
  }
}
</script>
<style rel="stylesheet/scss" type="text/scss" lang="scss" scoped>
	/*@import "../../styles/common.css";*/
	.j-carousels{
		img{
			width: 100%;
		}
		.clearfix{
			overflow: hidden;
		}
	}
</style>
<style rel="stylesheet/scss" type="text/scss" lang="scss">
	.j-carousels{
		.swiper-button-prev, .swiper-button-next {
			width: 42px;
			height: 42px;
			background-size: 42px 42px;
		}
		.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
			background-image: url('../../assets/next.png');
			right: 10px;
			left: auto;
		}
		.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
			background-image: url('../../assets/prev.png');
			left: 10px;
			right: auto;
		}
	}
	@media (max-width: 767px){
		.swiper-button-prev, .swiper-button-next {
			width: 30px!important;
			height: 30px!important;
			background-size: 30px 30px!important;
		}
		.swiper-button-prev, .swiper-button-next {
			width: 30px!important;
			height: 30px!important;
			margin-top: -15px!important;
			background-size: 30px 30px!important;
		}
	}
</style>
